<template>
  <div>
    <!-- 打开对话框 -->
    <el-dialog :visible.sync="dialogVisible" title="场所地址" width="80%">
      <el-input v-model="searchQuery" placeholder="输入地址进行搜索" @keyup.enter="searchAddress" style="width:400px"></el-input>
      <el-button @click="searchAddress">搜索</el-button>
      <el-button @click="confirmLocation">确定位置</el-button>
      <div id="map" style="height: 600px;top:10px"></div>
    </el-dialog>
  </div>
</template>


<script>
export default {
  data() {
    return {
      searchQuery: '', // 用户输入的地址
      dialogVisible: false, // 控制弹窗显示
      map: null, // 地图实例
      marker: null, // 标记实例
      geocoder: null, // 地理编码器实例
      latLng: null, // 存储最终选择的经纬度
      lat: 0,
      lng: 0,
    }
  },


  methods:{
    // 显示弹框
    show() {
      this.dialogVisible =true;
      this.$nextTick(() => {
       this.initMap(); // 打开对话框时初始化地图
      });
    },
    // 初始化地图
    initMap () {
      const myLatlng = new qq.maps.LatLng(30.266888, 120.152369); // 默认位置
      const myOptions = {
        zoom: 18,
        center: myLatlng,
        mapTypeId: qq.maps.MapTypeId.ROADMAP,
        viewMode:'3D'
      };
 
      // 创建地图实例
      this.map = new qq.maps.Map(document.getElementById("map"), myOptions);
 
      // 初始化地理编码器
      this.geocoder = new qq.maps.Geocoder({
        complete: (result) => {
          this.latLng = result.detail.location;
          console.log('经纬度：', this.latLng);
        }
      });
 
      // 地图加载完成后添加标记
      qq.maps.event.addListenerOnce(this.map, 'idle', () => {
        console.log('地图已加载完成，添加默认标记');
        this.addMarker(myLatlng);  // 在地图加载完成后添加标记
      });

      // 地图点击事件，选择位置
      qq.maps.event.addListener(this.map, 'click', (event) => {
        this.latLng = event.latLng;
        console.log('点击位置的经纬度：', this.latLng.getLat(), this.latLng.getLng());
        this.addMarker(this.latLng);
      });
    },
 
    searchAddress () {
      const KEY = "RVVBZ-YEPWT-53MXG-VXSRM-2QWY2-OFBKZ"; // 你的开发者密钥
      //30.266888,120.152369
       const lat = 30.266888; // 当前定位的纬度
       const lng = 120.152369; // 当前定位的经度
       const radius = 1000;  // 搜索半径，单位：米
 
      // 构建请求URL
      //let url = "https://apis.map.qq.com/ws/place/v1/search";
      let url ="https://apis.map.qq.com/ws/place/v1/suggestion";
      // 请求参数
      let params = {
        key: KEY,
        keyword: encodeURIComponent(this.searchQuery), // 对关键字进行URL编码
        boundary: `nearby(${lat},${lng},${radius},1)`, // 设置附近搜索，自动扩大范围
        output: "jsonp", // 返回JSONP格式
        page_size: 10, // 每页返回的条目数
        page_index: 1, // 查询第一页数据
      };
 
      this.$jsonp(url, params)
        .then((res) => {
          console.log("搜索结果:", res);
 
          // 处理返回的数据，格式化为element-ui组件能识别的格式
          res.data.forEach((item) => {
            item.value = item.title; // 将标题映射为value字段
          });
 
          // 你可以在这里调用addMarker()来展示搜索结果的标记
          if (res.data && res.data.length > 0) {
            console.log("第一个结果地址：", res.data[0]);
            //this.form.shopAddress = res.data[0].address
            this.addMarker(new qq.maps.LatLng(res.data[0].location.lat, res.data[0].location.lng));
          } else {
            console.log("没有找到相关地址");
          }
        })
        .catch((err) => {
          console.log("搜索请求错误:", err);
        });
    },
 
    // 添加标记
    addMarker (latLng) {
      console.log("latLng=" + latLng);
      if (this.marker) {
        this.marker.setMap(null); // 移除已有标记
      }
 
      this.marker = new qq.maps.Marker({
        position: latLng,
        map: this.map
      });
 
      this.map.panTo(latLng); // 移动地图到选中的位置
    },
    confirmLocation () {
      console.log('当前选中的经纬度:', this.latLng);
 
      if (this.latLng != null) {
        // 保留六位小数
           this.lat= this.latLng.getLat().toFixed(6);
           this.lng = this.latLng.getLng().toFixed(6);
 
        console.log('选择的经纬度:', this.lat, this.lng);
      
 
        // 请求URL
        const KEY = "RVVBZ-YEPWT-53MXG-VXSRM-2QWY2-OFBKZ";  // 你的开发者密钥
        const url = `https://apis.map.qq.com/ws/geocoder/v1/?location=${this.latLng.getLat()},${this.latLng.getLng()}&key=${KEY}&get_poi=0&output=jsonp`;
 
        console.log('请求的URL:', url);  // 打印请求的URL，确认拼接是否正确
 
        // 使用jsonp请求腾讯地图的接口
        this.$jsonp(url, { output: 'jsonp' })
          .then((res) => {
            console.log('API 响应:', res);  // 打印返回的API响应
 
            if (res.status === 0) {
              // 逆地址解析成功，获取详细的地址信息
              //const address = res.result.address;  // 标准格式化地址
              const recommend = res.result.formatted_addresses.recommend || '';  // 推荐的地址描述（可选）
              //const standardAddress = res.result.formatted_addresses.standard_address || '';  // 推荐的地址描述（可选）
              // 将地址信息赋值给表单
              //this.form.shopAddress = address;
 
              console.log('地址:', recommend);
              //console.log('推荐地址:', recommend);
               let hashMap = new Map();
                    hashMap.set('recommend',recommend);
                    hashMap.set('lat',this.lat);
                    hashMap.set('lng',this.lng);

               this.$emit('custom-event', hashMap );
              // 关闭对话框
              this.dialogVisible = false;
              
            } else {
              console.error('地址解析失败:', res.message);
              this.$emit('custom-event', '');
              alert('地址解析失败，请稍后再试');
            }
              
          })
          .catch((err) => {
            console.error('请求错误:', err);
            alert('请求错误，请稍后再试');
          });

       
 
        // 将处理后的经纬度赋值给表单
        // this.form.lat = Number(lat);  // 转换为数字并赋值
        // this.form.lng = Number(lng);  // 转换为数字并赋值
 
      } else {
        console.error('没有选择地址');
        alert('请先选择一个位置');
      }
    },
  }
}

</script>
